<template>
    <div>
        <!-- <div v-for="item,idnex in UserData " :key="idnex">
            <span>{{ item.id }}</span>
        </div> -->
        <el-card>
    <!-- 模糊查询 马佳乐 2023年7月4日19点10分 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-s-tools" style="font-weight:bold"></i>  系统管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card style="margin-top:20px">
        <el-row>
            <el-col :span="8">
                <el-row>
                    <el-col :span="6">用户姓名：</el-col>
                    <el-col :span="16">
                        <el-input v-model="queryUser.userName" placeholder="请输入用户姓名："></el-input>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="8">
                <el-row>
                    <el-col :span="6">登录账号：</el-col>
                    <el-col :span="16">
                        <el-input v-model="queryUser.userLoginName" placeholder="请输入登陆账号："></el-input>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="8">
                <el-button type="primary" @click="getuser()">查询</el-button>
                <el-button type="success" @click="addUserWindows">新增</el-button>
            </el-col>
            <br><br><br>
        </el-row>
  <!-- 查询用户表全部数据 马佳乐 2023年6月19日17点12分-->
  <el-table :data="UserData" stripe style="width: 100%">
            <el-table-column
            prop="id"
            label="用户编号"
            width="100">
            </el-table-column>
            <el-table-column
            prop="userName"
            label="用户姓名"
            width="150">
            </el-table-column>
            <el-table-column
            prop="userLoginName"
            label="登录账号"
            width="150">
            </el-table-column>
            <el-table-column
            prop="userSex"
            label="用户性别"
            width="150">
            <template slot-scope="scope">
                <span v-if="scope.row.userSex == 1" >男</span>
                <span v-if="scope.row.userSex == 2" >女</span>
            </template>
            </el-table-column>
            <el-table-column
            prop="userAge"
            label="用户年龄"
            width="150">
            </el-table-column>
            <el-table-column
            prop="createTime"
            label="创建时间"
            width="450">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="360">
                <template slot-scope="scope">
                    <el-button @click="upUserWindows(scope.row)" type="primary" size="small">编辑</el-button>
                    <el-button @click="upUserPasswordWindows(scope.row.id)" type="primary" size="small">编辑密码</el-button>
                    <el-button @click="updatedelete(scope.row.id)" type="primary" size="small">删除</el-button>
                    <el-button @click="userAssignmentRoleWinwows(scope.row)" type="primary" size="small">分配角色</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <!-- 分页 马佳乐 2023年6月19日19点37分-->
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalSize">
        </el-pagination>
        <!-- 新增用户的弹窗 马佳乐 2023年6月19日19点51分 -->
    <el-dialog title="新增用户" :visible.sync="addUser" width="25%">
        <!-- 新增表单 马佳乐 2023年6月19日19点51分 -->
        <el-form :model="userForm" ref="userForm" label-width="20%" class="demo-ruleForm">
              <el-form-item label="用户姓名" prop="userName">
              <el-input v-model="userForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="登录账号" prop="userLoginName">
              <el-input v-model="userForm.userLoginName"></el-input>
            </el-form-item>
            <el-form-item prop="userPassword">
              <el-input
                v-model="userForm.userPassword"
                type="userPassword"
                :show-password="true"
                autocomplete="off"
                placeholder="请输入密码">
                <template slot="prepend">密码：</template>
              </el-input>
            </el-form-item>
            <el-form-item label="用户性别" prop="userSex">
                <el-radio-group v-model="userForm.userSex">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="2">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="用户年龄" prop="userAge">
              <el-input v-model="userForm.userAge"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addUser = false">取 消</el-button>
            <el-button type="primary" @click="saveUser()">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 修改用户的弹窗 马佳乐 2023年6月19日20点37分 -->
    <el-dialog title="编辑用户信息" :visible.sync="updateUser" width="25%">
        <!-- 修改表单 马佳乐 2023年6月19日19点51分 -->
        <el-form :model="userupdateForm" :rules="userupdateFormRules" ref="userupdateForm" label-width="20%" class="demo-ruleForm">
              <el-form-item label="用户姓名" prop="userName">
              <el-input v-model="userupdateForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="登录账号" prop="userLoginName">
              <el-input v-model="userupdateForm.userLoginName"></el-input>
            </el-form-item>
            <el-form-item label="用户性别" prop="userSex">
                <el-radio-group v-model="userupdateForm.userSex">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="2">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="用户年龄" prop="userAge">
              <el-input v-model="userupdateForm.userAge"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="updateUser = false">取 消</el-button>
            <el-button type="primary" @click="upUser()">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 修改用户密码的弹窗 马佳乐 2023年6月20日09点03分 -->
    <el-dialog title="编辑密码" :visible.sync="updateUserPassword" width="30%">
        <!-- 修改密码表单 马佳乐  -->
        <el-form :model="userupdatepasswordForm" :rules="userupdatepasswordFromRules" ref="userupdatepasswordForm" label-width="20%" class="demo-ruleForm">
            <!-- <span style="color:rgb(78, 79, 80),text-align: left">注：默认密码为123456！</span> -->
                <el-form-item label="新密码" prop="checkNewUserPassWord">
                    <el-input type="password" v-model="userupdatepasswordForm.checkNewUserPassWord" autocomplete="off"></el-input>
                </el-form-item><br>
                <el-form-item label="确认密码" prop="userPassword">
                    <el-input type="password" v-model="userupdatepasswordForm.userPassword" autocomplete="off"></el-input>
                </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="updateUserPassword = false">取 消</el-button>
            <el-button type="primary" @click="upUserPassword()">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 用户分配角色窗口 马佳乐 2023年7月5日14点37分 -->
    <el-dialog title="分配角色" :visible.sync="userRole" width="30%">
        <!-- 用户分配权限表单 马佳乐  -->
        <el-form :model="userRoleForm" ref="userRoleForm" label-width="20%" class="demo-ruleForm">
            <el-select v-model="userRoleForm.roleId" placeholder="请选择活动区域">
                <el-option label="1" value="1">超级管理员</el-option>
                <el-option label="2" value="2">测试</el-option>
                <el-option label="3" value="3">普通员工</el-option>
            </el-select>
            <!-- <el-select v-model="value" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="userAssignmentRoleWinwows = false">取 消</el-button>
            <el-button type="primary" @click="userAssignmentRole()">确 定</el-button>
        </div>
    </el-dialog>
</el-card>
    </div>
</template>

<script>
export default {
    data () {
        // 验证新密码
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.userupdatepasswordForm.userPassword !== '') {
                    this.$refs.userupdatepasswordForm.validateField('userPassword');
                }
                callback();
            }
        };
        // 验证确认密码
        var validatePass2 = (rule, value, callback) => {
        if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.userupdatepasswordForm.checkNewUserPassWord) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            // 获取id值
            aaaa:'',
            // sysUserBack: {},
            UserLoginNameRole: '',
            // 用户表全查数据
            UserData: [],
            // 表格加载
            loading: true,
            // 分页
            page: {
                totalSize: 0,
                pageNum: 1,
                pageSize: 10
            },
            
            // 获取id值
            idss: '',
            // 用户表添加表单数据
            userForm: {},
            // 点开页面时添加表单处于关闭状态
            addUser: false,
            // 用户表修改表单数据
            userupdateForm: {},
            // 用户表修改表单数据规则
            userupdateFormRules: {
                // 修改用户名表单规则
                userLoginName: [ { validator: this.validatorUserLoginName, trigger: 'blur' } ]
            },
            // 点开页面时修改表单处于关闭状态
            updateUser: false,
            // 用户修改密码数据
            userupdatepasswordForm: {
                id: this.idss,
                // 新密码为空
                checkNewUserPassWord: '',
                // 确认密码为空
                checkConfirmUserPassWord: ''
            },
            // 修改密码规则
            userupdatepasswordFromRules: {
                // 新密码规则
                checkNewUserPassWord: [ 
                    { required: true, message: "密码不能为空", trigger: "blur" },
                    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
                    { required: true, validator: validatePass, trigger: "blur" }
                ],
                // 确认密码规则
                userPassword: [ 
                    { required: true, message: "密码不能为空", trigger: "blur" },
                    { required: true, validator: validatePass2, trigger: "blur" }
                ]
            },
            // 点开页面时修改密码表单处于关闭状态
            updateUserPassword: false,
            // 模糊查询数据
            queryUser: {
                // 用户名
                userName: '',
                // 登录账号
                userLoginName: ''
            },
            // 点开页面时分配权限窗口处于关闭状态
            userRole: false,
            // 用户分配角色数据
            userRoleForm: {},
        }
    },
    mounted () {
        this.getuser()
    },
    methods: {
        // 用户表 全查
        getuser () {
            // 查看所有用户表信息
            this.$axios.get('/User/SysUserList', {
                params: {
                    // 当前页
                    pageNum: this.page.pageNum,
                    // 每页条数
                    pageSize: this.page.pageSize,
                    // 模糊查询用户名
                    userName: this.queryUser.userName,
                    // 模糊查询登录账号
                    userLoginName: this.queryUser.userLoginName,
                    // id: this.idss
                }
            }).then(res => {
                if (res.data.flag) {
                    this.UserData = res.data.data.content
                    this.page.totalSize = res.data.data.totalSize
                    
                    // this.UserData.id = this.sss
                    // console.log(sss)
                }
                this.loading = false
            }).catch(err => {
                this.Mymessage('error', err)
            })
        },
        // 用户表添加
        saveUser () {
            // 手动提交表单
            this.$axios.post('/User/SysUserAdd',this.userForm).then(res => {
                if (res.data.flag) {
                    this.Mymessage('success', '恭喜您，操作成功')
                    this.addUser = false
                    this.getuser()
                } else {
                    this.Mymessage('waning', '很抱歉，操作失败')
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 用户表添加弹窗
        addUserWindows () {
            this.userForm = {}
            this.addUser = ''
        },
        // 验证用户名是否有重复
        validatorUserLoginName (userLoginName, value, callback) {
            const reg = /^[\u4E00-\u9FA5a-zA-Z0-9_-]{1,20}$/
            if (value !== '') {
                if (!reg.test(value)) {
                    callback(new Error('只能输入中文字、字母、数字、下划线和减号，并且长度为 4 到 20 个字符'))
                } else {
                    this.$axios.get('/User/repeatUserLoginName?userLoginName=' + value).then(res => {
                        if (res.data.data !== null) {
                            if (value === this.UserLoginNameRole) {    
                                callback()
                            } else {
                                callback(new Error('当前用户名已存在'))
                            }
                        } else {
                            callback()
                        }
                    })
                }
            } else {
              callback()
            }
        },
        // 用户表修改
        upUser () {
            // 手动提交表单
            this.$axios.put('/User/SysUserUpdate',this.userupdateForm).then(res => {
                if (res.data.flag) {
                    this.Mymessage('success', '恭喜您，操作成功')
                    this.updateUser = false
                    this.getuser()
                } else {
                    this.Mymessage('waning', '很抱歉，操作失败')
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 用户表修改弹窗
        upUserWindows (data) {
            this.userupdateForm = JSON.parse(JSON.stringify(data))
            this.UserLoginNameRole = this.userupdateForm.userLoginName
            this.updateUser = true
        },
        // 用户表逻辑删除
        updatedelete (id) {
            this.$confirm('是否删除该用户信息', '提示', {
                confirmButtonClass: '确定',
                cancelButtonText: '取消',
                type: 'waning'
            }).then(() => {
                this.$axios.delete('/User/SysUserDelete', {
                params: {
                    id: id
                }
                }).then(res => {
                if (res.data.flag) {
                    this.getuser()
                    this.$message({ message: '删除成功!', type: 'success' })
                } else {
                    this.Mymessage('waning', '删除失败!')
                }
                }).catch(res => {
                this.Mymessage('error', '删除失败,请联系管理员')
                })
            }).catch(() => {
                this.Mymessage('info', '已取消删除')
            })
        },
        // 用户表修改密码undefined
        upUserPassword () {
            this.userupdatepasswordForm.id = this.aaaa
            // 手动提交表单
            this.$axios.post('/User/SysUserUpdatePassword',this.userupdatepasswordForm).then(res => {
                if (res.data.flag) {
                    this.Mymessage('success', '恭喜您，操作成功')
                    this.updateUserPassword = false
                    this.getuser()
                } else {
                    this.Mymessage('waning', '很抱歉，操作失败')
                }
            }).catch(err => {
                console.log(err)
            })
    },
        // 用户表修改密码弹窗
        upUserPasswordWindows (id) {
            console.log(id)
            this.aaaa = id
            console.log(this.aaaa)
            this.idss = this.userupdatepasswordForm.id
            this.updateUserPassword = true
        },
        // 用户分配权限方法
        userAssignmentRole () {
            // 手动提交表单
            this.$axios.post('/User/userAssignmentRole' ,this.userRoleForm).then(res => {
                if (res.data.flag) {
                    this.Mymessage('success', res.data.data)
                    this.userRole = false
                    this.getuser()
                } else {
                    this.Mymessage('waning', res.data.data)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 用户分配权限弹窗
        userAssignmentRoleWinwows (data){
            this.userRoleForm = JSON.parse(JSON.stringify(data))
            this.userRole = true
        },
        // 分页
        handleSizeChange (val) { 
        this.page.pageSize = val
        this.getuser()
        },
        // 分页
        handleCurrentChange (val) { 
        this.page.pageNum = val
        this.getuser()
        },
        // 弹窗提示
        Mymessage (type, text) { 
        this.$message({
            showClose: true,
            message: text,
            type: type
        })
        }
    }
}
</script>

<style>
.el-col.el-col-6 {
    margin-top: 10px;
    margin-right: -30px;
}
</style>